//  this library.
import 'package:flutter/material.dart';
import 'package:hktk_app/util/font_util.dart';
import 'package:hktk_app/util/view_util.dart';

// 起始位置
double qs = 0;

/// 滑动条组件
class SliderWidget extends StatelessWidget {
  /// 当前值
  final double value;

  /// 滑动值改变回调
  final ValueChanged<double> onChanged;

  /// 滑动结束返回
  final ValueChanged<double> onChangeEnd;

  /// 最小值
  final double min;

  /// 最大值
  final double max;

  /// 滑动条几等分
  final int divisions;

  /// 是否显示夜间模式
  final bool szYjms;

  const SliderWidget({
    super.key,
    required this.value,
    required this.onChanged,
    required this.min,
    required this.max,
    required this.divisions,
    required this.onChangeEnd,
    required this.szYjms,
  });

  @override
  Widget build(BuildContext context) {

    return Column(
      children: [
        _tipsWidget(),
        hiSpace(height: 11),
        _trackWidget(),
      ],
    );
  }

  /// 提示
  _tipsWidget() {
    String tips = value.toInt().toString();
    var d = (max + min) / 2;
    if (value == d) {
      tips = "标准";
    } else if (value == min) {
      tips = "小号";
    } else if (value == max) {
      tips = "特大";
    }
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Text("小号", style: FontUtil.fontBlack1(18, szYjms: szYjms)),
        Text("A$tips", style: FontUtil.fontBlack1(24, szYjms: szYjms)),
        Text("特大", style: FontUtil.fontBlack1(18, szYjms: szYjms)),
      ],
    );
  }

  /// 轨道
  _trackWidget() {
    return SizedBox(
      height: 40,
      child: Stack(
        children: [
          _showTrack(),
          _thumbWidget(),
        ],
      ),
    );
  }

  /// 显示轨道
  _showTrack() {
    return Positioned.fill(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _showRoundDot(),
          Container(
            width: 180,
            height: 4,
            color: colorGrey5,
          ),
          _showRoundDot(),
        ],
      ),
    );
  }

  /// 显示圆点
  _showRoundDot() {
    return Container(
      width: 8,
      height: 8,
      decoration: BoxDecoration(
        color: colorGrey5,
        borderRadius: BorderRadius.all(Radius.circular(4)),
      ),
    );
  }

  /// 滑块显示
  _thumbWidget() {
    // 计算滑块显示位置
    double divisionsWidth = 200 / divisions;
    var d = value - min;
    double leftWidth = divisionsWidth * d;
    return Positioned(
      left: leftWidth,
      child: _onHorizontal(divisionsWidth),
    );
  }

  /// 滑动监听
  _onHorizontal(double d1) {
    // debugPrint("每份间距 ===> $d1");
    // 每份大小
    var div = (max - min) / divisions;
    return GestureDetector(
      onHorizontalDragDown: (details) {
        // debugPrint(
        //     "手指按下时 ===> ${details.globalPosition} --- ${details.localPosition}");
      },
      onHorizontalDragStart: (details) {
        // debugPrint(
        //     "手指开始水平滑动 ===> ${details.globalPosition} --- ${details.localPosition}");
        qs = details.globalPosition.dx;
      },
      onHorizontalDragUpdate: (details) {
        // debugPrint(
        //     "手指水平滑动 ===> ${details.globalPosition} --- ${details.localPosition}");
        var updateDx = details.globalPosition.dx;
        var ydjs = updateDx - qs;
        // debugPrint("ydjs ===> $ydjs");
        // debugPrint("qs ===> $qs");
        // debugPrint("");
        if (value < max && ydjs > d1) {
          qs = updateDx;
          // 右移一格
          onChanged(value + div);
        } else if (value > min && ydjs < -d1) {
          qs = updateDx;
          // 左移一格

          // 这里是不是页面级provide注入比较好啊
          onChanged(value - div);
        }
      },
      onHorizontalDragEnd: (details) {
        // debugPrint(
        //     "手指水平滑动结束 ===> ${details.velocity} --- ${details.primaryVelocity}");
        onChangeEnd(value);
      },
      onHorizontalDragCancel: () {
        // debugPrint("手指取消时 ===> ");
      },
      child: _showThumb(),
    );
  }

  /// 滑块
  _showThumb() {
    return Container(
      width: 28,
      height: 28,
      decoration: BoxDecoration(
        color: getColorBlue1(szYjms: szYjms),
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
    );
  }
}
